<template>
    <div class="customer">
        <div class="tab">
<!--            <el-button class="QueryButton" @click="QueryRaisingSkills()">搜 索</el-button>-->
            <div>
                <el-button class="QueryButton" @click="QueryViewCount()">当月用户操作数《{{this.viewCount}}》</el-button>
            </div>
            <!--顾客列表-->
            <el-row>
                <!--                <el-col :span="6" v-for="commodity in customerList" :key="commodity.id">-->
                <div>
                    <el-table
                            :data="rabbitAndCustomerList"
                            stripe="true"
                            border="true"
                            style="width: 100%">

                        <el-table-column
                                prop="question"
                                label="养兔问题" style="width: 5%">
                        </el-table-column>
                        <el-table-column
                                prop="answer"
                                label="宠物医生回答" style="width: 30%">
                        </el-table-column>
                        <el-table-column
                                prop="varieties"
                                label="兔子品种" style="width: 5%">
                        </el-table-column>

                    </el-table>
                </div>
                <!--                </el-col>-->
            </el-row>
        </div>

        <!--分页条-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[3,5,7,9]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        // name: "rabbitAndCustomer",
        data() {
            return {
                totalPage: 1,
                pageNum: 1,
                pageSize: 3,
                total: 0,
                totalCount: 0,
                QueryForm: {
                    search: ''
                },
                viewCount:'',
                rabbitAndCustomerList: []

            }
        },
        methods: {
            handleSizeChange(pageSize){
                this.pageSize = pageSize
                this.QueryRaisingSkills()
            },
            handleCurrentChange(pageNum){
                this.pageNum  = pageNum
                this.QueryRaisingSkills()
            },
            QueryRaisingSkills() {
                this.rabbitAndCustomerList = []
                this.$http.get('/raisingSkillsDO/query', {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        search: this.QueryForm.search
                    }
                }).then(res => {
                    this.totalCount = res.data.data.totalCount
                    this.total = res.data.data.total
                    this.totalPage = res.data.data.totalPage
                    this.pageSize = res.data.data.pageSize
                    this.rabbitAndCustomerList = res.data.data.list.slice( (this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
                    this.QueryViewCount();
                    // console.log(res.data.data)
                })
            },
            QueryViewCount(){
                this.$http.get('/viewCountDO/query').then(res => {
                    this.viewCount = res.data.data
                    console.log(res.data.data)
                })
            }
        } ,created() {
            this.QueryViewCount();
            this.QueryRaisingSkills();
        },
    }
</script>

<style scoped>
    @import url("RS.css");
</style>